<template>
    <div>
        <div class="left">
            <div class="card"> 
                <div class="card_title"><i></i>
                <div>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '实时巡检'}" @click="changeSubTitle('实时巡检')">实时巡检</span>
                    <span style="color: #00FFFF;margin: 0 6px">|</span>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '动态漫游'}" @click="changeSubTitle('动态漫游')">动态漫游</span>
                </div>
                <i class="more_icon"></i></div> 
            </div>
            <div class="card mt14 l1_card">
                <div class="card_title"><i></i>设备信息总览<i class="more_icon"></i></div> 
                <div class="l1_content">
                    <div class="flex justify-between">
                        <img src="~@static/img/无人机1.png" alt="">
                        <p>无人机总数</p>
                        <p>
                            <span>96</span>
                            <span>个</span>
                        </p>
                    </div>
                    <div class="l1_card_group flex justify-between">
                        <div v-for="(item,index) in devViewData" :key="index">
                            <div class="flex justify-between">
                                <p>
                                    <span></span>
                                    <span>{{ item.text }}</span>
                                </p>
                                <span>{{ item.unit }}</span>
                            </div> 
                            <div class="flex justify-between">
                                <img src="~@static/img/工程1.png" alt="">
                                <p>{{ item.value }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="l1_chart_box" id="L1_chart"></div>
                </div>
            </div>
            <div class="card mt14 l2_card">
                <div class="card_title"><i></i>巡检信息总览<i class="more_icon"></i></div> 
                <div class="l2_content">
                    <div class="l2_item" v-for="item in 3" :key="item" @click="showDroneDetail=true">
                        <div class="l2_item_title flex justify-between">
                            <p>
                                <i class="el-icon-caret-right"></i>
                                <span>024-07-31 16:23:30</span>
                            </p>
                            <p>已完成</p>
                        </div>
                        <div class="line"></div>
                        <div class="l2_item_content flex justify-between">
                            <div>
                                <p>机场</p>
                                <p>XXX101机场</p>
                            </div>
                            <div>
                                <p>机巢</p>
                                <p>0105机巢</p>
                            </div>
                            <div>
                                <p>无人机</p>
                                <p>105机</p>
                            </div>
                            <div>
                                <p>任务类型</p>
                                <p class="warning_text">巡检</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right" v-if="showDroneDetail"> 
            <div class="card r1_card">
                <div class="card_title"><i></i>无人机信息</div> 
                <div class="drone_title">
                    <span>XXX无人机105</span>
                    <span>执勤中</span>
                    <span>(234.34523423,52.21343523)</span>
                </div>
                <div class="drone_information flex justify-between">
                    <img src="~@static/img/无人机2.png" alt="">
                    <div>
                        <p>
                            <span>电量：</span>
                            <span class="battery">
                                <img src="~@static/img/电池half.png" alt="">
                                55%
                            </span>
                        </p>
                        <p>
                            <span>状态：</span>
                            <span>正常</span>
                        </p>
                        <p>
                            <span>图传信号：</span>
                            <span>正常</span>
                        </p>
                        <p>
                            <span>RTK信号：</span>
                            <span>正常</span>
                        </p>
                        <p>
                            <span>存储卡容量：</span>
                            <span>251/256GB</span>
                        </p>
                    </div>
                </div>
                <div class="drone_status flex justify-between">
                    <div>
                        <p>速度</p>
                        <p>11m/s</p>
                    </div>
                    <div>
                        <p>高度</p>
                        <p>50m</p>
                    </div>
                    <div>
                        <p>飞行里程</p>
                        <p>600m</p>
                    </div>
                    <div>
                        <p>飞行时间</p>
                        <p>15min</p>
                    </div>
                </div>
                <div class="drone_tools flex justify-between">
                    <div class="flex" v-for="(item,index) in droneToolsData" :key="index"><img :src="item.img" alt=""></div>
                </div>
                <div class="drone_video" @click="showVideoDia=true">
                    <video :key="videoKey" controls v-if="showVideoPlayer">
                        <source :src="videoUrl" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <img src="~@static/img/无人机影像.png" alt="" v-else>
                    <p>实时影像</p>
                </div>
            </div>

            <div class="card mt14">
                <div class="card_title"><i></i>作业信息详情</div> 
                <div class="job_content">
                    <div>
                        <span>盐碱地实时巡检</span>
                        <span>作业中</span>
                    </div>
                    <div>当前进度: </div>
                    <el-progress :percentage="50" :stroke-width="18" color="#0ACD1E"></el-progress>
                    <el-descriptions class="descriptions" :column="1">
                        <el-descriptions-item label="开始时间">2024/8/13 9:00:00</el-descriptions-item>
                        <el-descriptions-item label="任务时长">30min</el-descriptions-item> 
                        <el-descriptions-item label="航线长度">1000m</el-descriptions-item> 
                        <el-descriptions-item label="执勤航线">XXXXXXX航线</el-descriptions-item> 
                    </el-descriptions>
                    <div class="btn_cell flex">
                        <p>暂停任务</p>
                        <p>取消任务</p>
                    </div>
                </div>
            </div>

        </div>

        
        <div class="drone_videoDia" v-if="showVideoDia">
            <i class="el-icon-close" @click="showVideoDia=false"></i>
            <video :key="videoKey" controls v-if="showVideoPlayer">
                <source :src="videoUrl" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <img src="~@static/img/drone/无人机图像.png" alt="" v-else>
        </div>
        
        <div class="drone_control" v-if="false"> 
            <div>
                <div class="direction_control">
                    <img src="~@static/img/drone/转向.png" alt="">
                </div>
                <p class="text_1">漫游控制</p>
                <p class="text_2">视点</p>
                <p class="text_3">速度</p>
                <div class="left_box">
                    <div class="flex"> 
                        <div class="lock control_btn">
                            <p>Q</p> 
                            <p>上升</p>
                        </div>
                        <div class="unlock control_btn">
                            <p>W</p> 
                            <p>前进</p>
                        </div> 
                    </div>
                    <div class="flex">
                        <div class="normal control_btn">
                            <p>A</p>
                            <p>向左</p>
                        </div>
                        <div class="unlock control_btn">
                            <p>S</p>
                            <p>后退</p>
                        </div>
                        <div class="normal control_btn">
                            <p>D</p>
                            <p>向右</p>
                        </div>
                    </div>
                    <div>
                        <div class="lock control_btn">
                            <p>C</p> 
                            <p>下降</p>
                        </div>
                    </div>
                </div>
                <div class="center_box">
                    <div>
                        <div class="normal control_btn">
                            <p><i class="el-icon-top"></i></p>
                            <p>抬头</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="normal control_btn">
                            <p><i class="el-icon-back"></i></p>
                            <p>望左</p>
                        </div>
                        <div class="normal control_btn">
                            <p><i class="el-icon-bottom"></i></p>
                            <p>低头</p>
                        </div>
                        <div class="normal control_btn">
                            <p><i class="el-icon-right"></i></p>
                            <p>望右</p>
                        </div>
                    </div>
                </div>
                <div class="right_box"> 
                    <div class="normal control_btn">
                        <p><i class="el-icon-minus"></i></p>
                        <p>减速</p>
                    </div>
                    <div class="normal control_btn">
                        <p><i class="el-icon-plus"></i></p>
                        <p>加速</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script> 

export default {
    data() {
        return {
            showVideoPlayer: false,
            showDroneDetail: false,
            showVideoDia: false,
            droneToolsData: [
                { name: "速度", img: require("../../static/img/Vector_速度.png") }, 
                { name: "设置", img: require("../../static/img/Vector_设置.png") }, 
                { name: "上", img: require("../../static/img/Vector_上.png") }, 
                { name: "下", img: require("../../static/img/Vector_下.png") }, 
                { name: "定位", img: require("../../static/img/Vector_定位.png") }, 
                { name: "AR", img: require("../../static/img/Vector_AR.png") }, 
            ],
            currentIndex: '实时巡检',
            devViewData: [
                { text: "覆盖区域", unit: "个", value: 24 },
                { text: "覆盖区域", unit: "㎡", value: 2000 },
                { text: "启用数", unit: "个", value: 96 },
                { text: "未启用数", unit: "个", value: 0 },
            ],
            videoUrl: "",
            videoKey: 0,
        }
    },

    mounted() {
        this.initpie();
        this.$bus.$on("play-video",(res)=>{
            this.playVideo(res);
            // this.showDroneDetail = false;
        })
    },

    methods: {
        playVideo(data){
            let _this = this;
            _this.videoKey += 1;
            if(data == "农高区试验田"){
                _this.videoUrl = require("@static/video/农高区.mp4");
            }else if(data == "渤海农场试验田"){
                _this.videoUrl = require("@static/video/渤海农场.mp4");
            }
            _this.showVideoPlayer = true;
        },
        initpie(){
            let _this = this;
            var chartDom = document.getElementById("L1_chart");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            let img = "../../static/img/pie_center.png"; 
            var trafficWay = [ 
                { name: '在线', value: 80, percent: 80 },
                { name: '工作中', value: 10, percent: 10 },
                { name: '离线', value: 5, percent: 5 },
                { name: '异常', value: 5, percent: 5 },
            ];

            var data = [];
            let legendData = [];
            var color=['#00FFFF','#FFD15C','#006ced','#DE506A','#9F3FFF','#EE8D33','#63EE33']
            for (var i = 0; i < trafficWay.length; i++) {
                legendData.push(trafficWay[i].name);
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    percent: trafficWay[i].percent,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 2,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [65, 69],
                center: ["30%","50%"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        } 
                    }
                },
                data: data
            }];
            var option = { 
                color : color, 
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 110,
                            height: 110
                        },
                        left: '15%',
                        top:  'center',
                        position: [100, 100]
                    }]
                },
                tooltip: {
                    show: false
                },
                legend: {
                    orient: 'vertical',
                    top: "center",
                    right: "6%",
                    itemGap: 14,
                    itemWidth: 12,
                    itemHeight: 8,  
                    data: legendData,  
                    textStyle: {
                        color: "#fff",
                        rich:{
                            a:{
                                color: "#fff",
                                fontSize: 14, 
                                fontWeight: 'bold',
                                textShadowColor: "#2FFFFF",
                                textShadowBlur: 4,    
                            }
                        }, 
                    }, 
                    formatter: function (name) {  //图例后添加数值 
                        let data = option.series[0].data; 
                        let tarValue;
                        let tarValue2;
                        for (let i = 0; i < data.length; i++) {
                            
                            if (data[i].name === name) { 
                                tarValue = data[i].value;
                                tarValue2 = data[i].percent;
                            }
                        } 
                        return name + "  " + '{a|' + tarValue  + "个" +'}' + " " + '{a|' + tarValue2   + "%" +'}' ;
                    },
                }, 
                series: seriesOption
            }
            chart.setOption(option);
        },
        changeSubTitle(data){
            this.currentIndex = data;
            if(data === '动态漫游'){
                this.$router.push("/roaming");
                this.$bus.$emit("send-Message","P4.2");
            }else{ 
                this.$bus.$emit("send-Message","P4.1");
            }
        },
    }, 
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss"; 

.b_a_color{
    color: #1FD7FF;
}

.l1_content{
    >div:nth-child(1){
        padding: 14px 20px;
        color: #fff;
        font-size: 18px;
        img{
            width: 50px;
            height: 50px;
        }
        >p:nth-of-type(2){
            span{
                text-shadow: 0 0 4px #29E3FC92;
                font-size: 16px;
            }
            >span:nth-child(1){
                font-size: 32px; 
            }
            >span:nth-child(2){
                font-weight: bold;
            }
        }
    }

    .l1_card_group{ 
        padding: 0 14px; 
        flex-wrap: wrap;
        >div{
            width: calc(50% - 10px);
            background-color: rgba($color: #0C355A, $alpha: 30);
            border-radius: 10px;
            padding: 10px 16px;
            box-sizing: border-box;
            margin-bottom: 8px;
            >div{ 
                color: #fff;
                &:nth-child(1){
                    p{
                        >span:nth-child(1){
                            display: inline-block;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background-color: #4AA3F5;
                            border: 3px solid #D9D9D9;
                            margin-right: 2px;
                        }
                        >span:nth-child(1){
                            font-size: 14px;
                        }
                    }
                }

                &:nth-child(2){ 
                    img{
                        width: 30px;
                        height: 30px;
                    }
                    p{
                        text-shadow: 0 0 4px #29E3FC92;
                        font-size: 26px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.l1_chart_box{
    height: 160px;
}
.l2_card{
    height: calc(100% - 564px);
    >div:nth-child(2){
        height: calc(100% - 50px);
    }
}

.l2_content{
    overflow-y: auto;
    padding: 10px 12px 0 12px;
    >div{
        background-color: rgba($color: #0C355A, $alpha: 50);
        border-radius: 10px;
        padding: 14px 0;
        margin-bottom: 12px;
        .l2_item_title{ 
            padding-right: 14px;
            .el-icon-caret-right{
                color: #3CD7F9;
                font-size: 18px;
            }
            p{
                color: #FFFFFF;
                font-size: 16px;
                &:nth-child(2){
                    color: #00E725;
                }
            }
        }

        .line{
            border-bottom: 1px solid #3CD7F9;
            margin: 10px 14px;
        }
    }

    .l2_item_content{
        padding: 0 14px;
        >div{
            text-align: center;
            font-size: 14px; 
            color: #FFFFFF;
            >p:nth-child(2){
                color: #2FFFFF;
                margin-top: 8px;
            }
        }

        .warning_text{
            color: #FFD15C !important;
        }
    }
}

.r1_card{
    height: calc(100% - 354px);

    .drone_video{
        height: calc(100% - 282px);
        margin-top: 10px; 
        position: relative;
        color: #fff;
        font-size: 14px;
        padding: 0 10px;
        box-sizing: border-box;
        img{ 
            width: 100%;
            height: 100%; 
        }
        video{ 
            width: 100%;
            height: 100%; 
            object-fit: fill;
        }
        p{
            position: absolute;
            top: 0;
            left: 10px; 
            background: rgba(0,0,0,0.4);
            padding: 6px 10px;
        }
    }
}

.drone_title{
    margin-left: 14px;
    span{
        color: #FFFFFF;
        font-size: 14px; 
        &:nth-child(2){
            display: inline-block;
            background-color: #29E3FC;
            border-radius: 4px;
            padding: 0 6px;
        }
        &:nth-child(3){
            color: #D9D9D9;
            font-size: 12px;
        }
    }
}

.drone_information{
    padding: 10px 14px;
    img{
        width: 146px;
        height: 96px;
    }
    >div{
        width: calc(100% - 158px);
        padding-left: 12px;
        color: #FFFFFF;
        font-size: 14px;
        .battery{
            img{ 
                width: 28px;
                height: 14px;
            } 
            color: #FF9900; 
        }
        p{
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:not(:first-child){
                >span:nth-child(2){
                    color: #0AA335;
                }
            }
        }
    }
}

.drone_status{
    padding:  0 14px 10px 14px;
    >div{
        color: #FFFFFF;
        font-size: 14px;
        text-align: center;
    }
}

.drone_tools{
    padding: 0 14px;
    >div{
        width: 40px;
        height: 40px;
        background-color: rgba($color: #ABABAB, $alpha: 30);
        border-radius: 6px;
        justify-content: center;
        cursor: pointer;
    }
}

.job_content{
    padding: 0 14px;
    color: #fff;
    >div:nth-child(1){
        color: #FFFFFF;
        >span{
            &:nth-child(2){
                display: inline-block;
                background-color: rgba($color: #29E3FC, $alpha: 92);
                padding: 0 4px;
                border-radius: 8px;
                font-size: 14px;
            }
            &:nth-child(1){
                font-size: 16px;
                font-weight: bold;
                margin-right: 16px;
            }
        }
    }
    >div:nth-child(2){
        margin: 8px 0;
    }
    /deep/ .el-progress__text{
        color: #fff !important;
        font-size: 14px !important;
    }

    .descriptions{
        margin-top: 10px;
        /deep/ .el-descriptions__body{
            background-color: transparent !important;
            color: #fff;
        }

        /deep/ .el-descriptions-item__content{
            color: #3CD7F9;
        }
    }

    .btn_cell{
        justify-content: space-around;
        padding-bottom: 10px;
        p{
            text-align: center;
            line-height: 26px;
            border: 1px solid #C4C4C4;
            border-radius: 9px;
            width: 100px;
            height: 28px;
            cursor: pointer;
            &:nth-child(1){
                border-color: #FFD15C;
            }
        }
    }
}

.drone_videoDia{
    width: 48vw;
    height: 60vh;
    position: absolute;
    z-index: 12;
    top: 20px;
    left: 50%; 
    transform: translateX(-50%);
    background: url("~@static/img/drone/弹窗背景.png") no-repeat 0 0/100% 100%;
    padding: 10px;
    box-sizing: border-box;
    .el-icon-close{
        color: #FFFFFF;
        font-weight: bold;
        float: right;
        cursor: pointer; 
    }
    img{
        width: 100%;
        height: calc(100% - 40px);
        margin-top: 10px;
    }
    video{ 
        width: 100%;
        height: calc(100% - 40px);
        object-fit: fill;
        margin-top: 10px;
    }
}

.drone_control{
    width: 500px;
    height: 200px;
    background: url("~@static/img/drone/无人机控制.png") no-repeat 0 0/100% 100%;
    position: absolute;
    z-index: 12;
    bottom: 20px;
    left: 50%; 
    transform: translateX(-50%);
    >div{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .direction_control{
        img{
            width: 88px;
            height: 88px;
            position: absolute;
            top: 50%;
            transform: translateY(-48%);
            right: -50px;
        }
    }

    .text_1{
        font-size: 16px;
        font-weight: bold;
        color: #D1D6E0;
        position: absolute;
        top: 0;
        left: 130px;
    }
    .text_2,.text_3{
        font-size: 14px;
        font-weight: bold;
        color: #F0F1F5;
        position: absolute;
        top: 2px;
    }
    .text_2{
        left: 210px;
    }
    .text_3{
        right: 80px;
    }

    .left_box{
        position: absolute;
        bottom: 10px;
        left: 60px;
        >div:nth-child(3){
            display: flex;
            justify-content: right;
        }
    }

    .control_btn{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        p{ 
            font-weight: bold;
            font-size: 12px;
            &:nth-child(1){
                margin-left: 2px;
            }
            &:nth-child(2){
                text-align: right;
                margin-right: 2px;
                margin-top: 3px;
            }
        }
    }

    .lock{ 
        position: relative;
        background: url("~@static/img/drone/锁定.png") no-repeat right 2px/12px 12px #7585A3;
        p{  
            color: #94A0B7;  
        }
    }
    .unlock{ 
        background: url("~@static/img/drone/解锁.png") no-repeat right 2px/12px 12px #47536B;
        p{
            &:nth-child(1){ 
                color: #00FFFF;
            }
            &:nth-child(2){ 
                color: #99C4FF;
            }
        }
      
    }
    .normal{
        background-color: #333C4C;
        p{
            &:nth-child(1){ 
                color: #94A0B7;
            }
            &:nth-child(2){ 
                color: #5C6B8A;
            }
        }
    }

    .center_box{
        position: absolute;
        left: 220px;
        bottom: 10px;
        >div:nth-child(1){
            display: flex;
            justify-content: center;
        }
    }

    .right_box{
        position: absolute;
        bottom: 10px;
        left: 380px;
        >div:nth-child(2){
            height: 80px;
            position: relative;
            >p:nth-child(2){
                position: absolute;
                bottom: 2px;
                right: 2px;
            }
        }
    }
}
</style> 